<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Event</title>

    <style type="text/css">
    </style>
</head>
<body>
<f:view>
<h:messages errorStyle="color: #ff0000" globalOnly="false"/>
    
        <%-- The existingItemId is used on updating an existing item --%>
        <table> 
        <h:form id="eventDetailForm">
<h:inputHidden id="currentEventId" value="#{eventHandler.currentEventId}" />
        
            <tr><td colspan="2">Edit Event details below</td></tr>
            <tr><td>Name:</td>
                <td>
                    <h:inputText required="true" id="Name" value="#{eventHandler.name}" />
                </td></tr>
            <tr><td>Description (optional):</td><td><h:inputText id="Description" value="#{eventHandler.description}"  /></td></tr>
            <tr><td>Start Date:<br>e.g.: 01/01/2009</td><td><h:inputText id="StartDate" required="true" value="#{eventHandler.startDate}">
              <f:convertDateTime type="date" pattern="MM/dd/yyyy" timeZone="America/Chicago"/></h:inputText>
              </td></tr>
            <tr><td>End Date:<br>e.g.: 01/01/2009</td><td><h:inputText id="EndDate" required="true" value="#{eventHandler.endDate}">
            <f:convertDateTime type="date" pattern="MM/dd/yyyy" timeZone="America/Chicago" /></h:inputText>
            </td></tr>
            <tr><td>Start Time:<br>e.g.: 11:45 AM</td><td><h:inputText id="StartTime" required="true" value="#{eventHandler.startTime}" >
            <f:convertDateTime type="time" timeStyle="short" timeZone="America/Chicago" /></h:inputText>
            </td></tr>
            <tr><td>End Time:<br>e.g.: 2:45 PM</td><td><h:inputText id="EndTime" required="true" value="#{eventHandler.endTime}" >
            <f:convertDateTime type="time" timeStyle="short" timeZone="America/Chicago" /></h:inputText>
            </td></tr>
            <tr><td colspan="2">
                <h:commandButton value="Update" action="#{eventHandler.update}" />
            </td></tr>
            <tr><td colspan="2">
                <h:commandButton value="Add Position" action="#{positionHandler.addToEvent}" >
                	<f:param name="currentEventId" value="#{eventHandler.currentEventId}" />
                </h:commandButton>
            </td></tr>
    </h:form>
            
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            
     <c:if test="${eventHandler.positions != null}"> 
            <tr><td colspan="2"><h3>Positions</h3></td></tr>
            <tr><td colspan="2">
                        <table>
            <tr><td><strong>Name</strong></td>
            <td><strong>Description</strong></td>
            <td><strong># Volunteers</strong></td>
			<td><strong>Action</strong></td>
			</tr>
			<%-- Workaround for invoking action in a faces dataTable --%>          
            <c:forEach items="${eventHandler.positions}" var="position" varStatus="status">
            <h:form>
	        <tr><td><c:out value="${position.name}" /></td>
	        <td><c:out value="${position.description}" /></td>
	        <td><c:out value="${position.numberOfVolunteers}" /></td>
	        <td><input type="hidden" name="currentPositionId" value="${position.positionId}" />
			<h:commandLink value="Remove Position" action="#{positionHandler.removePosition}" />
	        <br />
	        <h:commandLink value="Modify Timeslots" action="#{timeslotHandler.modifyTimeSlots}" />
	        </td></tr>
	       <tr><td></td><td colspan=3>
	        	<table>
	        		<tr><td colspan=3><strong>Timeslots for ${position.name}</strong></td>
	        		<%-- Workaround for invoking action in a faces dataTable --%>          
		            <c:forEach items="${position.timeSlots}" var="timeslot" >
		           
			        	<tr>
				        <td><fmt:formatDate value="${timeslot.startTime}" type="time" timeStyle="short" timeZone="America/Chicago"/> - <fmt:formatDate value="${timeslot.endTime}" type="time" timeStyle="short" timeZone="America/Chicago"/></td>
				        <td><c:out value="${timeslot.numberOfVolunteers}" /> Volunteers</td>
				        <td>
				        </td></tr>
	        		</c:forEach>
	        	</table>
	        </td></tr>
	       </h:form>
	        </c:forEach>
		    </table>
	        </td></tr>
            
	        <tr><td colspan="2"><h3>Volunteers</h3></td></tr>
	        <h:form id="volunteerForm">
	         <h:dataTable value="#{eventHandler.filledPositionsTimeslots}" var="pos"
               border="1">
	        <h:column>
	            <f:facet name="header"><h:outputText value="Position" /> </f:facet>
	            <h:outputText value="#{pos.name}" />
	        </h:column>
	        <h:column>
	            <f:facet name="header"><h:outputText value="StartTime" /> </f:facet>
	            <h:outputText value="#{pos.startTime}" >
	            	<f:convertDateTime type="time" timeStyle="short" timeZone="America/Chicago" />
	        	</h:outputText>
	        </h:column>
	        <h:column>
	            <f:facet name="header"><h:outputText value="EndTime" /> </f:facet>
	            <h:outputText value="#{pos.endTime}" >
	            	<f:convertDateTime type="time" timeStyle="short" timeZone="America/Chicago" />
	         	</h:outputText>
	         </h:column>
	        <h:column>
	            <f:facet name="header"><h:outputText value="Volunteer" /> </f:facet>
	            <h:outputText value="#{pos.volunteerName}" />	
	        </h:column>
	        <h:column>
	            <h:commandLink action="#{eventHandler.unRegisterUser}" value="UnRegister Volunteer" />
	            	<%--- <f:param value="#{pos.slotType}" name="type" /> 
	            	<f:param value="#{pos.id}" name="id" />
	            	<f:param value="#{pos.volunteerId}" name="userId" />
	            </h:commandLink> --%>	
	        </h:column>
    	</h:dataTable>
	        </h:form>
	        </c:if>
	        
	        
        </table>
        <br />
    <a href="myEvents.jsf" />Back to My Events</a>
        <br />
    <a href="home.jsf" />Home</a>
</f:view>
</body>
</html>